<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,h2{
				margin:0px;
				padding: 0px;
				color: white;
			}
			
			
			.header,.left,.main,.right,.footer{
				background: #333;
				margin: 5px 0;
			}
			
			h2{
				font-size:3em;
				text-align:center;
			}
			
			.aaa{
				width: 960px;
				margin: auto;
			}
			
			.header{
				width: 100%;
				line-height: 100px;
				float: left;
			}
			
			.left{
				width: 200px	;
				line-height: 400px;
				float: left;
				margin-right: 10px;
			}
			
			.main{
				width: 540px;
				line-height: 400px;
				float: left;
			}
			
			.right{
				width: 200px;
				line-height: 400px;
				float: right;
			}
			
			.footer{
				width: 100%;
				line-height: 100px;
				float: left;
			}
			
			
			
/*1000px以上屏幕如何显示*/
			@media screen and (min-width:1000px){
				h2{
					color:yellow;
					font-size: 4em;
				}
				
				.aaa{
					width: 1200px;
				}
				
				.left{width: 250px;}
				.main{width: 680px;}
				.right{width: 250px;}
			}
			
			
			
			
/*640~1000px以上屏幕如何显示*/
			@media screen and (min-width:640px) and (max-width:1000px){
				h2{
					color: red;
					font-size: 2.5em;
				}
				
				.aaa{width: 610px;}
				.header{line-height: 80px;}
				
				.left{width: 200px;line-height: 350px;}
				
				.main{width: 400px;line-height: 350px;}
				
				.right{display:none;line-height: 350px;}
				
				.footer{line-height: 80px;}
				
			}
			
			
			
/*639px以下屏幕如何显示*/
			@media screen and (max-width:639px){
				h2{color:green;font-size: 1.5em;}
				.aaa{width:500px;}
				
				.left,.right{
					width: 100%;
					line-height: 100px;
				}
				.main{width: 100%;
				line-height: 200px;}
				
				
				
				
				
			}	
		</style>
	</head>
	<body>
		<section class="aaa">
			<header class="header">
				<h2>HEADER</h2>
			</header>
			
			<aside class="left">
				<h2>LEFT</h2>
			</aside>
			
			<section class="main">
				<h2>MAIN</h2>
			</section>
			
			<aside class="right">
				<h2>RIGHT</h2>
			</aside>
			
			<footer class="footer">
				<h2>FOOTER</h2>
			</footer>
		</section>
	</body>
</html>
